<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="Access-Control-Allow-Origin" content="">
		<meta http-equiv="content-security-policy">
		<title>订单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">订单</h1>
		</header>

		<div class="mui-content chexian offter-list car-manage my-indent">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll slidertab">
						<a class="mui-control-item mui-active" href="#item1mobile" tapcat='10' tapurl='User/carList'>
							全部车辆
						</a>
						<a class="mui-control-item" href="#item2mobile" tapcat='' tapurl='User/hebao'>
							核保中
						</a>
						<a class="mui-control-item" href="#item3mobile" tapcat='' tapurl='User/daizf'>
							待支付
						</a>
						<a class="mui-control-item" href="#item4mobile" tapcat='' tapurl='User/yizf'>
							已支付
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-table-view car_article_list" tappage='1' tapcon='car_article_list'>
									<div class="mui-card">
										<div class="mui-card-header mui-card-media">
											<div class="mui-media-body">
												浙B78945<b class="red">(价格有效期15小时)</b> <span>核保通过</span>
											</div>
										</div>
										<div class="mui-card-content">
											<div class="mui-card-content-inner">
												<h5><span>保单总价：</span><font class="red">¥5021.04</font></h5>
												<h5><span>投保日期：</span><font>2016-04-30</font></h5>
												<h5><span>投保公司：</span><font>中国人保</font></h5>
												<h5><span>每月还款金额：</span><font>¥288.44</font></h5>
												<h5><span>每月还款日期：</span><font>5号</font></h5>
												<h6 data-id='1'><a class="mui-btn mui-btn-royal msph-btn pay_money">待支付</a><a class="mui-btn details">详情</a></h6>
											</div>
										</div>
									</div>
									<div class="mui-card">
										<div class="mui-card-header mui-card-media">
											<div class="mui-media-body">
												浙B78945<b class="red">(价格有效期15小时)</b> <span>已过期</span>
											</div>
										</div>
										<div class="mui-card-content">
											<div class="mui-card-content-inner">
												<h5 class="orange">本保单已经脱保，请重新投保</h5>
												<h5><span>保单总价：</span><font class="red">¥5021.04</font></h5>
												<h5><span>投保日期：</span><font>2016-04-30</font></h5>
												<h5><span>投保公司：</span><font>中国人保</font></h5>
												<h5><span>每月还款金额：</span><font>¥288.44</font></h5>
												<h5><span>每月还款日期：</span><font>5号</font></h5>
												<h6 data-id='2'><a class="mui-btn details">详情</a></h6>
											</div>
										</div>
									</div>
									<div class="mui-card">
										<div class="mui-card-header mui-card-media">
											<div class="mui-media-body">
												浙B78945<span>已生效</span>
											</div>
										</div>
										<div class="mui-card-content">
											<div class="mui-card-content-inner">
												<h5><span>保单总价：</span><font class="red">¥5021.04</font></h5>
												<h5><span>投保日期：</span><font>2016-04-30</font></h5>
												<h5><span>投保公司：</span><font>中国人保</font></h5>
												<h5><span>每月还款金额：</span><font>¥288.44</font></h5>
												<h5><span>每月还款日期：</span><font>5号</font></h5>
												<h6 data-id='3'><a class="mui-btn mui-btn-royal msph-btn surrender" >退保</a><a class="mui-btn details">详情</a></h6>
											</div>
										</div>
									</div>
									<div class="mui-card">
										<div class="mui-card-header mui-card-media">
											<div class="mui-media-body">
												浙B78945<span>已退保</span>
											</div>
										</div>
										<div class="mui-card-content">
											<div class="mui-card-content-inner">
												<h5><span>保单总价：</span><font class="red">¥5021.04</font></h5>
												<h5><span>投保日期：</span><font>2016-04-30</font></h5>
												<h5><span>投保公司：</span><font>中国人保</font></h5>
												<h5><span>每月还款金额：</span><font>¥288.44</font></h5>
												<h5><span>每月还款日期：</span><font>5号</font></h5>
												<h6 data-id='4'><a class="mui-btn mui-btn-royal msph-btn refund_inquiry">退款查询</a><a class="mui-btn details">详情</a></h6>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-table-view car_hb_list" tappage='1' tapcon='car_hb_list'>
									<div class="mui-card">
										<div class="mui-card-header mui-card-media">
											<div class="mui-media-body">
												浙B78945<b class="red">(价格有效期15小时)</b> <span>核保通过</span>
											</div>
										</div>
										<div class="mui-card-content">
											<div class="mui-card-content-inner">
												<h5><span>保单总价：</span><font class="red">¥5021.04</font></h5>
												<h5><span>投保日期：</span><font>2016-04-30</font></h5>
												<h5><span>投保公司：</span><font>中国人保</font></h5>
												<h5><span>每月还款金额：</span><font>¥288.44</font></h5>
												<h5><span>每月还款日期：</span><font>5号</font></h5>
												<h6 data-id='1'><a class="mui-btn mui-btn-royal msph-btn pay_money">待支付</a><a class="mui-btn details">详情</a></h6>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-table-view" tappage='1' tapcon='car_dzf_list'>
									<div class="mui-card">
										<div class="mui-card-header mui-card-media">
											<div class="mui-media-body">
												浙B78945<b class="red">(价格有效期15小时)</b> <span>已过期</span>
											</div>
										</div>
										<div class="mui-card-content">
											<div class="mui-card-content-inner">
												<h5 class="orange">本保单已经脱保，请重新投保</h5>
												<h5><span>保单总价：</span><font class="red">¥5021.04</font></h5>
												<h5><span>投保日期：</span><font>2016-04-30</font></h5>
												<h5><span>投保公司：</span><font>中国人保</font></h5>
												<h5><span>每月还款金额：</span><font>¥288.44</font></h5>
												<h5><span>每月还款日期：</span><font>5号</font></h5>
												<h6 data-id='1'><a class="mui-btn details">详情</a></h6>
											</div>
										</div>
									</div>
									<div class="mui-card">
										<div class="mui-card-header mui-card-media">
											<div class="mui-media-body">
												浙B78945<b class="red">(价格有效期15小时)</b> <span>核保通过</span>
											</div>
										</div>
										<div class="mui-card-content">
											<div class="mui-card-content-inner">
												<h5><span>保单总价：</span><font class="red">¥5021.04</font></h5>
												<h5><span>投保日期：</span><font>2016-04-30</font></h5>
												<h5><span>投保公司：</span><font>中国人保</font></h5>
												<h5><span>每月还款金额：</span><font>¥288.44</font></h5>
												<h5><span>每月还款日期：</span><font>5号</font></h5>
												<h6 data-id='1'><a class="mui-btn mui-btn-royal msph-btn pay_money">待支付</a><a class="mui-btn details">详情</a></h6>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-table-view car_yzf_list" tappage='1' tapcon='car_yzf_list'>
									<div class="mui-card">
										<div class="mui-card-header mui-card-media">
											<div class="mui-media-body">
												浙B78945<span>已生效</span>
											</div>
										</div>
										<div class="mui-card-content">
											<div class="mui-card-content-inner">
												<h5><span>保单总价：</span><font class="red">¥5021.04</font></h5>
												<h5><span>投保日期：</span><font>2016-04-30</font></h5>
												<h5><span>投保公司：</span><font>中国人保</font></h5>
												<h5><span>每月还款金额：</span><font>¥288.44</font></h5>
												<h5><span>每月还款日期：</span><font>5号</font></h5>
												<h6 data-id='3'><a class="mui-btn mui-btn-royal msph-btn surrender" >退保</a><a class="mui-btn details">详情</a></h6>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.3.min.js"></script>
		<script src="js/dui.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script>
			mui.init();
			var page = 0;
			var MODULE_COROLLER_METHOD = "";
			mui.plusReady(function() {
				//每次下拉加载条数
				var pagesize=2;
				var count = 0;
				//滑动初始加载
				document.querySelector('.mui-slider').addEventListener('slide', function(event) {
					var this_ul = $('.mui-slider').find('.mui-slider-group').find('.mui-slider-item').eq(event.detail.slideNumber).find('.mui-table-view');
					var this_page = this_ul.attr('tappage');
					if(this_page == '1') {
						var this_tem = this_ul.attr('tapcon');
						var this_catid = $(".slidertab a").eq(event.detail.slideNumber).attr("tapcat");
						var ajax_url = $(".slidertab a").eq(event.detail.slideNumber).attr("tapurl");
						var ul = this_ul.get(0);
						ajax_load(ajax_url, ul, this_tem, this_catid, this_page, pagesize);
					}
				}); 
				//循环初始化所有下拉刷新，上拉加载。
				$.each($('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
					//初始化加载第一个tab
					if(index=='0'){
						first_ul = this.querySelector('.mui-table-view');
						var first_page = first_ul.getAttribute('tappage');
						var first_tem = first_ul.getAttribute('tapcon');
						if(first_page=='1'){
							var first_catid = $(".slidertab a").eq(index).attr("tapcat");
							var ajax_url = $(".slidertab a").eq(index).attr("tapurl");
							ajax_load(ajax_url, first_ul, first_tem, first_catid, first_page, pagesize);
						
						}
					}
					mui(pullRefreshEl).pullToRefresh({
						up: {
							contentrefresh: '正在加载...',
							contentnomore:'没有更多数据了',
							callback: function() { 
								var self = this;
								setTimeout(function() {
									var ul = self.element.querySelector('.mui-table-view');
									var tappage = ul.getAttribute('tappage');
									var temid = ul.getAttribute('tapcon');
									var num=ul.getAttribute('tapcount');
									var pullSize = num/2;
									var catid = $(".slidertab a").eq(index).attr("tapcat");
									var ajax_url = $(".slidertab a").eq(index).attr("tapurl");
									ajax_load(ajax_url, ul, temid, catid, tappage, pagesize);
									self.endPullUpToRefresh(++ count>pullSize);
								}, 1000);
							}
						}
					});
				});
			});
		</script>
	</body>

</html>